<template>
  <div class="container">
    <div class="left-container" >

      <div class="main">
        <div class="news" v-for="item in list" :key="item.id">
          <h2 @click="test(item.id)">{{item.title}}</h2>
        </div>

        <!-- 分页 -->
        <!-- 需要修改的地方@current-change="getList"  -->
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center;"
          layout="total, prev, pager, next, jumper"
          @current-change="getList"
        />

      </div>
    </div>



    <div class="right-container">
      <div class="detail">
        <div class="user">
          <img src="../components/Home/images/tou.jpg">
          <span class="username">admin</span>
          <span>> </span>
        </div>
        <div class="article">
          <ul>
            <li>
              <span>0</span>
              <br/>
              <span>获赞</span>
            </li>
            <li>
              <span>0</span>
              <br/>
              <span>粉丝</span>
            </li>
            <li>
              <span>0</span>
              <br/>
              <span>关注</span>
            </li>
          </ul>
        </div>
        <div class="thing">
          <ul>
            <li>
              <img src="../components/Home/images/tou.jpg">
              <br/>
              <span>写文章</span>
            </li>
            <li>
              <img src="../components/Home/images/tou.jpg">
              <br/>
              <span>发头条</span>
            </li>
            <li>
              <img src="../components/Home/images/tou.jpg">
              <br/>
              <span>写问答</span>
            </li>
            <li>
              <img src="../components/Home/images/tou.jpg">
              <br/>
              <span>发视频</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="hot">
        <div class="header">
          <img src="../components/Home/images/hot-search.png" style="width: 20px;height: 20px;">
          <span>头条新闻</span>
          <img src="../components/Home/images/刷新.png" style="width: 15px;height: 15px; margin-left: 40px">
          <span class="reflash">换一换</span>
        </div>
        <div class="hot-news">
          <ul v-for="(item,index) in hotList" :key="item.id" class="text item ">
            <li  @click="test(item.id)">{{index+1}} {{item.title}}</li>
          </ul>
        </div>
        <div class="copyright">
          <div class="header">
            <span>©2022</span>
            <span>摘新团队</span>
          </div>
          <div class="team">
                        <span>
                            地&nbsp;&nbsp;址：桂林电子科技大学花江校区
                            <br/>
                            学&nbsp;&nbsp;院：计算机与信息安全学院
                        </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import article from "../api/article"
export default {
  name: "index",
  mounted() {
    this.getList(1)
  },
  data () {
    return {
      num: 1,
      activeIndex: '1',
      key:'',
      list:null,//查询后的接口集合
      page:1,//当前页
      limit:10,//每页记录总数
      total:0,//总记录数
      count:0,
      hotList:""
    }
  },
  methods: {
    getList(page=1){
      this.page=page
      article.search(this.$route.params.key,this.page,this.limit)
        .then(response=>{
          console.log(response)
          this.list=response.data.data.rows
          this.total=response.data.data.total;
          this.getHot()
        })
    },
    getHot(){
      article.getHot()
        .then(response=>{
          this.hotList=response.data.data.rows
        })
    },
    test(id){
      let routeUrl = this.$router.resolve({
        name: "details",
        params: {id:id},

      });
      article.count(id)
        .then(response=>{
        })
      window.open(routeUrl.href, '_blank');
    }
  },
  updated() {
    this.getList(this.page)
  }
}
</script>

<style scoped>
.container{
  width: 1080px;
  /*height: 1800px;*/
  background-color: #1d7db1;
  margin-left: auto;
  margin-right: auto;

}
.container .left-container{
  /*background-color: pink;*/
  height: 100%;
  width: 75%;
  margin-top: 0px;
  float: left;

}
.container .left-container .nav{
  width: 100%;
  /*background-color: skyblue;*/
  display: block;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #FFFFFF;
  /*position: fixed;*/
}
.container .left-container li{
  float: left;
  /*color: #595a5a;*/
  width: 70px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin: 5px 15px;
  font-size: 18px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
.container .left-container li a{
  color: #393636;
}
.container .left-container li a:hover{
  color: red;
}
.container .left-container .more div{
  display: none;
  width: 280px;
  position: absolute;
  top: 50px;
  left: 520px;
  background-color: aquamarine;
  z-index: 100;
  border-radius: 5px;
}
.container .left-container .more:hover div{
  display: block;
}
.container .left-container .more div li{
  float: left;
  background-color: green;
  width: 50px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin: 5px 10px;
  font-size: 16px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
.container .left-container .main{
  width: 100%;
  height: 80%;
  /*background-color: #974BE0;*/
  display: block;
  margin-top: 50px;
}
.container .left-container .main .news{
  width: 95%;
  /*background-color: #ef3f52;*/
  height: 60px;
  margin-left: 30px;
}
.container .left-container .main .news h2{
  font-size: 22px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
  color: #666;
  margin-top: 20px;
}
.container .left-container .main .news .detail{
  font-size: 14px;
  margin-top: 8px;
}
.container .left-container .main .news .detail .top{
  color: red;
}






/*右边*/
.container .right-container{
  float: left;
  /*background-color: red;*/
  width: 20%;
  margin-top: 20px;

}
.container .right-container .detail{
  width: 240px;
  height: 180px;
  background-color:#FAFAFA;
  border-radius: 20px;
  margin-top: 20px;
  /*position: fixed;*/
}
.container .right-container .user{
  width: 120px;
  height: 60px;
  border-radius: 20px;
  margin-top: 10px;
  text-align: center;
  line-height: 60px;
  display: inline-block;
  margin-left: 10px;
}
.container .right-container .user img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: -10px;
  vertical-align: middle
}
.container .right-container .user span{
  font-size: 20px;
}
.container .right-container .article{
  margin-top: 5px;
  text-align: center;
  display: block;
}
.container .right-container .article li{
  float: left;
  width: 60px;
  height: 40px;
  background-color:#fff;
  margin: 0 10px;
  border-radius: 8px;
}
.container .right-container .detail .thing{
  margin-top: 60px;
  width: 100%;
  text-align: center;
  background-color:#fff;
}
.container .right-container .thing img{
  width: 20px;
  height: 20px;
}
.container .right-container .thing li{
  float: left;
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border-radius: 8px;
}
.container .right-container .hot{
  margin-top: 220px;
  /*position: fixed;*/
}
.container .right-container .hot .header{
  font-size: 18px;
  margin-bottom: 10px;
  margin-left: 10px;

}
.container .right-container .hot .header .reflash{
  font-size: 14px;

}
.container .right-container .hot .hot-news{
  width: 100%
}
.container .right-container .hot li{
  width: 100%;
  height: 30px;
  margin-left: 10px;
}
.container .right-container .hot li a{
  color: black;
  font-size: 12px;
  margin-left: 5px;
}
.container .right-container .copyright{
  margin-top: 20px;
}
.container .right-container .copyright .team{
  margin-left: 10px;
}
/*reset*/
*{padding: 0;margin: 0;}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
html, body { height: 100%;  color: #333; font-size: 12px; font-family: "微软雅黑",MicrosoftYaHei;}
a { text-decoration: none; color: #3cf; -webkit-tap-highlight-color: transparent;}
li{list-style: none;}
table{border-collapse: collapse;}
input {outline: medium none;font-family: "微软雅黑",MicrosoftYaHei;font-size: 14px;}
button{font-family:"微软雅黑",MicrosoftYaHei;}
em {font-style: normal;}
.wrap{max-width: 100%;min-height: 100%;overflow: hidden;margin: 0 auto;background: #ccc;}

.left{float: left;}
.right{float: right;}
.clear{clear:both;}
.red{color: #f60;}

.ececk_warning{
  font-size: 13px;
  color: red;
  width: 300px;
  margin: 0 auto;
  display: none;
}

</style>
